<template lang="">
    <section class="jumbotron">
        <h3 class="jumnotron-heading"> Search</h3>
        <div>
            <input type="text" placeholder="enter te name you search" v-model="keyWord">&nbsp;<button @click="searchUsers">Search</button>
        </div>
    </section>
</template>
<script>
    export default {
        name:'Search',
        data(){
            return{
                keyWord:''
            }
        },
        methods:{
            searchUsers(){
                //请求前更新List中的数据
                this.$bus.$emit("updateListData",{
                    isFirst:false,
                    isLoading:true,
                    errMsg:'',
                    users:[]
                })
                this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response=>{
                        console.log("请求成功了")
                        this.$bus.$emit("updateListData",{
                            isLoading:false,
                            errMsg:'',
                            users:response.data.items
                        })
                    },
                    error=>{
                        console.log("请求失败了",error.msg)
                        this.$bus.$emit("updateListData",{
                            errMsg:error.msg,
                            users:[]
                        })
                    }
                )
            }
        }
    }
</script>
<style lang="less" scoped>
    .jumbotron{
        background-color: #d4d4d4;
        padding:18px;
    }
</style>